<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2024-01-16 15:14:30
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-01-22 15:38:16
-->
<template>
  <div>
    <el-dialog
      title="管理技能"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      top="50px"
    >
      <div class="paddingCon">
        <el-button
          size="mini"
          icon="el-icon-plus"
          type="primary"
          @click="openAddinput"
          >添加技能</el-button
        >
        <el-form :model="form" label-width="85px" v-if="addInputShow">
          <el-form-item label="技能名称:" :required="true">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-button size="mini" type="primary" @click="confirmAdd"
            >确定</el-button
          >
        </el-form>
        <div class="skillNumber">
          技能总数：<span>{{ skillTotal }}</span>
        </div>
        <el-table
          :data="tableData"
          border
          height="400"
          size="small"
          style="width: 100%"
        >
          <!-- height="580" -->
          <el-table-column prop="name" label="技能名称" align="center">
            <template slot-scope="scope">
              <!-- {{ scope.row.name }} -->

              <el-input
                v-model="scope.row.name"
                v-if="editShow && scope.$index == selectItem"
                ref="filedInput"
                autofocus="true"
              ></el-input>
              <div v-else>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="talent_names"
            label="已认证人员"
            align="center"
          />
          <!-- <el-table-column prop="user" label="微项目积分数" align="center">
            <template slot-scope="scope">
              {{ scope.row.user?.min_project_points }}
            </template>
          </el-table-column> -->
          <el-table-column
            fixed="right"
            prop=""
            label="操作"
            align="center"
            width="170"
          >
            <template slot-scope="scope">
              <div class="">
                <el-link
                  v-if="!editBtnshow && scope.$index == selectItem"
                  type="primary"
                  @click="onBtns(2, scope.$index, scope.row)"
                  >确定</el-link
                >
                <el-link
                  v-else
                  type="primary"
                  @click="onBtns(1, scope.$index, scope.row)"
                  >编辑</el-link
                >
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="danger"
                  @click="onBtns(3, scope.$index, scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { skillList, skillDel, skillEdit, skillAdd } from "@/api/talent";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        name: "",
      },
      selectItem: "-1",
      addInputShow: false,
      tableData: [],
      skillTotal: "",
      editShow: false,
      editBtnshow: true,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      skillList({
        page: 1,
        limit: 999,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.skillTotal = res.data.page.count;
        }
      });
    },
    openAddinput() {
      this.addInputShow = !this.addInputShow;
    },
    confirmAdd() {
      skillAdd(this.form).then((res) => {
        if (res.code == 200) {
          console.log(res.data, "000000");
          this.form.name = "";
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.addInputShow = false;
          this.getList();
        }
      });
    },
    onBtns(val, index, info) {
      // console.log(val, index, info, "KKKKKK");
      if (val == 1) {
        // this.id = info.id;
        this.selectItem = index;
        this.editShow = true;
        this.editBtnshow = false;

        this.$nextTick(() => {
          this.$refs.filedInput.focus();
        });
      } else if (val == 2) {
        this.editShow = false;
        this.editBtnshow = true;
        skillEdit({
          id: info.id,
          name: this.tableData[index].name,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else {
        this.$confirm("确认删除该技能吗？", "", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(() => {
            skillDel({
              id: info.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      }
    },
    handleClose() {
      this.$emit("handleClose", true);
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.paddingCon {
  //   margin: 28px;
  /deep/.el-button {
    width: 84px;
    padding: 9px 10px 10px;
    color: #ffffff;
  }
  /deep/.el-form {
    margin-top: 29px;
    display: flex;
    // align-items: center;
    .el-input {
      width: 300px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      .el-input__inner {
        height: 32px;
      }
      //   border: 1px solid #d4d4d4;
    }
    .el-button {
      margin: 4px 0 0 20px;
      width: 60px;
      height: 32px;
      background: #0087fa;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
    }
  }
  .skillNumber {
    margin: 29px 0 20px 3px;
    width: 150px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #0087fa;
    line-height: 16px;
  }
}
</style>
